<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Cors Test</title>
</head>

<body>
<input type="text" id="url_prefix" value="https://swgen2-dev.successwareg2.com/api/spike" style="width:400px">
<input type="button" id="about" value="about" onclick="getAbout()"/>
<form enctype="multipart/form-data">
    <input name="file" type="file"/>
    <input type="button" id="form" value="Upload"/>
</form>
<progress></progress>
<script>

    function getAbout() {
        var basePrefix = $("#url_prefix").val();
        $.get(basePrefix + "/about",
            function (data) {
                alert("Data Loaded: " + data);
            });
    }

    $(':file').on('change', function () {
        var file = this.files[0];

        if (file.size > 1024) {
            console.log('max upload size is 1k');
        }
    });

    $('#form').on('click', function () {
        var basePrefix = $("#url_prefix").val();
        $.ajax({
            // Your server script to process the upload
            url: basePrefix + '/media/upload',
            type: 'POST',

            // Form data
            data: new FormData($('form')[0]),

            // Tell jQuery not to process data or worry about content-type
            // You *must* include these options!
            cache: false,
            contentType: false,
            processData: false,

            // Custom XMLHttpRequest
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) {
                    // For handling the progress of the upload
                    myXhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            $('progress').attr({
                                value: e.loaded,
                                max: e.total,
                            });
                            alert("ok");
                        }
                    }, false);
                }
                return myXhr;
            }
        });
    });
</script>
</body>

</html>